<template>
 <view class="main">
	<view class="mask"></view>
   <view class="hm">
	   
   <view class="logo">
	 <view class="ilist" @click="myitem">
		<view class="ilist1"></view> 
		<view class="ilist2"></view> 
	 </view>
	 <image src="https://ppp.new.zeroitem.cn/ppp/logo.png" class="img1"></image>   
   </view>
   <view class="menu">
	 <view class="menu-1" @click="jumpmenu(1)">
		 <view class="dot"></view>
		 一键下单</view>
	 <view class="menu-1 cur">约拍同款</view>
	 <view class="menu-1" @click="jumpmenu(3)">定制悬赏</view> 
	 <view class="menu-1" @click="jumpmenu(4)">我的订单</view> 
   </view>
   <view class="part1">
	   <view class="p1-1" :class="ptype1==1 ? 'pcur' :''" @click="setptype(1)">分类</view>
	   <view class="p1-1" :class="ptype2==1 ? 'pcur' :''" @click="setptype(2)">距离</view>
	   <view class="p1-1" :class="ptype3==1 ? 'pcur' :''" @click="setptype(3)">价格</view>
	   <button class="p1-2 flex_comm" open-type="contact">
		 <image src="https://ppp.new.zeroitem.cn/ppp/kefu.png" class="keimg"></image>  
		  客服
	   </button>
	    <image src="https://ppp.new.zeroitem.cn/ppp/ss.png" class="ssmg" @click="sstc"></image> 
   </view>
   <view class="part2" v-if="showtab==1">
	 <block v-if="tmode==1">
	  <view class="tmenu">
		<view class="tmenu1" @click="appointment(i)" :class="{ tcur: sitem.indexOf(i) != -1 }" v-for="(item,i) of pitem" :key="i" >{{item.val}}</view>
	  </view>
	   <view class="btnq flex_comm" @click="qdsearch()">确定</view>
	 </block>  
	 
	 <block v-if="tmode==2">
	  <view class="tju2" :style="{'padding-left': dt+'rpx'}">{{nd}}km</view>
	  <view class="tju flex_comm">
		  <view class="dot"></view>
		  <slider :value="nd" @change="sliderChange" min="0" max="30" block-size="12" class="sbar"/>
		  <view class="dot"></view>
	  </view>
	  <view class="tju1 flex_comm">
		  <view class="fm1">0km</view>
		  <view class="fm1 right">30km</view>
	  </view>
	  <view class="btnq flex_comm btnb1" @click="qdsearch()">确定</view>
	 </block>   
	 <block v-if="tmode==3">
	  <view class="tju4">
	    <input type="number" class="tju4-1" placeholder="￥" placeholder-style="text-align:right;" v-model="sprice"/>
		<view class="tju4-2">价格区间</view>
		<input type="number" class="tju4-1" placeholder="￥" placeholder-style="text-align:right;" v-model="eprice"/>
	  </view>
	  <view class="btnq flex_comm btnb1" @click="qdsearch()">确定</view>
	 </block> 		    
   </view> 
   
   <view class="part3">  
	<scroll-view scroll-y="true" style="height:1200rpx;" @scrolltolower="onReachScollBottom">
	 <view class="pitem" v-for="(item,index) in plist">
	   <view class="playbtn"  v-if="item.play==0" @click="showplay(index)"></view>
	   <view class="playbtn1"  v-if="item.play==1"></view>
	  <view class="pitem-f">
		<view class="ppm1" @click="psmain(item.uid)">{{item.zpmc}}</view>
		 <view class="p5-1-2" @click="znum(item.id,index)">{{item.znum}}<image src="https://ppp.new.zeroitem.cn/ppp/ps/6.png" class="pimg8"></image>
		 </view>
		 <button open-type="share"  :data-name="item.zpmc" data-type="1" :data-pic="item.video_pic" :data-id="item.id" style="height:48rpx;width:48rpx">
		  <image src="https://ppp.new.zeroitem.cn/ppp/fxshare.png" class="pimg8"></image> 
		 </button>
	  </view>
	  <view style="display:flex">
	    <video :src="item.src1" style="width:654rpx;height:308rpx" objectFit="cover" :id="'id'+item.id" @play="videoPlayHandle('id'+item.id)" v-if="item.play==1"></video>
		<image :src="item.video_pic" style="width:654rpx;height:308rpx" v-if="item.play==0" @click="showplay(index)"></image>
	  </view>
	  <view class="pitem-1 flex_comm">
		 <image :src="item.logo" class="fimg" @click="psmain(item.uid)"></image>
		 <view class="pitem-c">
			<view class="pitem-c1" @click="psmain(item.uid)">
			   {{item.uname}} <text class="txt5">¥  {{item.ckjg}}</text>
			 </view>
			<view class="pitem-c2" @click="psmain(item.uid)">{{item.mm}}</view>
		 </view>
		 <view class="pitem-r" @click="pth(item.id)">
	      <image src="https://ppp.new.zeroitem.cn/ppp/add.png" class="ptkimg"></image>
		   拍同款
		 </view>
	  </view>
	 </view> 
	</scroll-view> 


		   
   </view>
   
  <view class="mask" v-if="areaShow">
  	 <view class="bztc1">
  		 <view class="bzpp1">搜索作品</view>
  		 <view class="line2" style="margin-top:10rpx"></view>
  		  <textarea placeholder="请输入您要所示的内容" class="barea" v-model="areaTxt"></textarea>
  			<view class="line2"></view>
  			<view class="tjbtn" @click="confirmAdd">确定</view>
  	 </view>
  </view>
 <view class="mask" v-if="pshow">
 	 <view class="bztc1" style="z-index:100000">
 		 <view class="bzpp2">关于片拍拍</view>
 		 <view class="line2" style="margin-top:10rpx"></view>
		 <video :src="pppset.ppp_video" style="width:590rpx;height:390rpx;margin:0 auto;border:10rpx;" objectFit="cover"></video>
 		  <scroll-view scroll-y="true" class="barea" style="height:500rpx">
			{{pppset.ppp_desc}}
		  </scroll-view>
 			<view class="line2"></view>
						
 			<view class="tjbtn" @click="confirmAdd1">我了解了</view>
 	 </view>
 </view> 
  
  
  
  
  
 </view>
 </view>
 </view>
 
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		toLogin
	} from '@/utils/login'
	
	import {
		loadingFun,
		menuJump
	} from '@/utils/tools'	
	
    import {
		loadingType
	} from '@/utils/type'
	
    import {
	   pslist,plable,dianzan,gettj,mydetail,pppset,yxdetail
	} from '@/api/ppp'	
	import {
		getUser
	} from '@/api/user';
	export default {
	    data() {
	        return {
			 sn:"",
			 areaShow:false,
			 pshow:false,
			 vshowsrc:"https://ppp-1300934138.cos.ap-shanghai.myqcloud.com/wxFile/1681223610929.mp4",
			 areaTxt:'',
	         tmode:0,
			 dt:20,
			 nd:0,
			 showtab:0,
			 plist:[],
			 page: 1,
			 status: loadingType.LOADING,
			 ptype1:0,
			 ptype2:0,
			 ptype3:0,
			 pitem:[],
			 sitem:[],
			 userInfo:[],
			 sprice:"",
			 eprice:"",
			 lng:"",
			 lat:"",
			 pppset:[],
			 video:null,
			 headid:0,
			 impstr:""
	        }
	    },
		onShow(){
		 
		 this.showpitem();
         
		// this.getmydetail();
		 this.getpppset();
		},
		onLoad(options) {
		  console.log(options);
		  var ftype=options.type;
		  var fxid=options.fxid;
		  var sn=options.sn;
		  var impstr=options.impstr;
		  if(sn=="" ||  sn==undefined){
			var scene=decodeURIComponent(options.scene);
			if(scene!='' && scene!=undefined && scene!='undefined'){
			 var arrsn=scene.split("=");
			 var arrsn1=arrsn[1].split("&");
			 sn=arrsn1[0];
			 if(arrsn[2]!=0 && arrsn[2]!='' && arrsn[2]!=undefined && arrsn[2]!='undefined'){
				impstr=arrsn[2];
			 }
			}
		  }
		  this.sn=sn;
		  if(sn!="" && sn!=undefined){
			uni.setStorageSync("tjsn",sn);
			if(ftype==1 && fxid!='' && fxid!=undefined){
				this.headid=fxid;
			}
		  }
		  if(impstr!="" && impstr!=undefined){
            this.impstr=impstr;
		  }
		  this.showpslist();
		  this.getUserInfoFun();
		},
		/***
		onReachBottom() {
		 this.showpslist()
		 setTimeout(() => {
		 	uni.stopPullDownRefresh();
	     }, 1000);	
		},
		*/
		
		onShareAppMessage(res) {
			var sn=this.userInfo.sn;
		  if(res.from=='button'){
			   if(res.target.dataset.type==1){
			　　return {
			　　　　title: res.target.dataset.name,
			　　　　//path: '/pages/ppp/ps/tjyx?zid='+res.target.dataset.id,
					path: '/pages/ppp/ps/zpshare?type=1&sn='+sn+'&id='+res.target.dataset.id,
				   imageUrl: res.target.dataset.pic
			　　}
			   }
			   if(res.target.dataset.type==2){
			   　　return {
			   　　　　title: res.target.dataset.name,
			   　　　　//path: "/pages/ppp/ps/order1?oid="+res.target.dataset.id,
					  path: "/pages/ppp/ps/zpshare?type=2&sn="+sn+"&id="+res.target.dataset.id,
					  imageUrl: res.target.dataset.pic
			   　　}
			   }
		   }
		   var sitem=this.sitem;
		   var pitem=this.pitem;
		   var imp=[];
		   for(var kz=0;kz<sitem.length;kz++){
		     imp[kz]=pitem[sitem[kz]]['id'];	
		   }
		   var impstr=imp.join("|");
		    return {
		     title: '片拍拍，拍出好生活',
		     path: '/pages/ppp/index/drps?sn='+sn+'&impstr='+impstr
		   }

		},	
			
			
		onShareTimeline(res) {
			var sn=this.userInfo.sn;
		  if(res.from=='button'){
			   if(res.target.dataset.type==1){
			　　return {
			　　　　title: res.target.dataset.name,
			　　　　//path: '/pages/ppp/ps/tjyx?zid='+res.target.dataset.id,
					path: '/pages/ppp/ps/zpshare?type=1&sn='+sn+'&id='+res.target.dataset.id,
				   imageUrl: res.target.dataset.pic
			　　}
			   }
			   if(res.target.dataset.type==2){
			   　　return {
			   　　　　title: res.target.dataset.name,
			   　　　　//path: "/pages/ppp/ps/order1?oid="+res.target.dataset.id,
					  path: "/pages/ppp/ps/zpshare?type=2&sn="+sn+"&id="+res.target.dataset.id,
					  imageUrl: res.target.dataset.pic
			   　　}
			   }
		   }
		   var sitem=this.sitem;
		   var pitem=this.pitem;
		   var imp=[];
		   for(var kz=0;kz<sitem.length;kz++){
		     imp[kz]=pitem[sitem[kz]]['id'];	
		   }
		   
		   var impstr=imp.join("|");
		    return {
		     title: '片拍拍，拍出好生活',
		     path: '/pages/ppp/index/drps?sn='+sn+'&impstr='+impstr
		   }

		},				
			
			
			
			
			
		
 methods: {
	async getUserInfoFun() {
		const {
			data,
			code
		} = await getUser()
		if (code == 1) {
			this.userInfo = data
		} 
	},
	async getheadervideo(type,id){
	 if(type==1){var flag=0;}
	 if(type==2){var flag=1;}
	  const{
	   code,
	   msg,
	   data
	  }= await yxdetail({flag:flag,id:id});
	   this.headervideo=data;
	},
	async znum(id,index){
	  var that=this;
	  var plist=that.plist
	  const{
	   code,
	   msg,
	   data
	  }= await dianzan({id:id});
	  if(code==1){
	   plist[index].znum=data.znum;
	   that.plist=plist;
	   uni.showToast({
	   	 icon:"none",
		 title:"点赞成功"
	   })
	  }	
	},
	checktj(sn){
	   gettj(sn);  
	},
			async getmydetail(){
			  var that=this;
			  const{code,msg,data,
			  }= await mydetail({});
			  if(code==1){
	           console.log(data);
			  }	
			},	
			
	async getpppset(){
	  var that=this;
	  var timestemp=uni.getStorageSync('pshow');
	  if(timestemp==''){
		that.pshow=true;  
		var str=new Date().getTime();
		uni.setStorageSync("pshow",str);
	  }
	  const{code,msg,data,
	  }= await pppset({});
	  if(code==1){
	    that.pppset=data;
	  }	
	},			
	onReachScollBottom(){
	 this.showpslist();
	},
	
	  getuserprofie(){
		    uni.getUserProfile({
		       			// 显示用户信息的语言
						lang: 'zh_CN',
						// 声明获取用户个人信息后的用途，不超过30个字符
						desc: '用来授权登录该小程序!',
						// 接口调用成功回调函数
						success: (userInfo) => {
				         console.log(userInfo);
						},
						// 接口调用失败回调函数
						fail: () => {
							
						},
						// 接口调用完成回调函数
						complete: () => {},
					})
	  },
	
	   sstc(){
		   this.areaShow = true;
		},
		confirmAdd(){
			this.areaShow = false
			this.qdsearch();	
		},	
		
		confirmAdd1(){
			this.pshow = false;
			var str=new Date().getTime();
			uni.setStorageSync("pshow",str);
		},		
		
	myitem(){
	 uni.navigateTo({
	 	url:"/pages/ppp/my/index"
	 })	
	},
	showplay(index){
	  var that=this;
	  var plist=that.plist
	  plist[index].play=1;
	  plist[index].src1=plist[index].video_src;
	  that.plist=plist;
	  that.videoPlayHandle('id'+plist[index].id); 
	},
    videoPlayHandle(id) {
	let newVideo = uni.createVideoContext(id);
	newVideo.id = id;
	if (!this.video) {
		this.video = newVideo;
		this.video.play();
		return
	}
	if (this.video.id !== newVideo.id) {
		newVideo.play();
		this.video.pause();
		this.video = newVideo;
	}
},
		setptype(type){
		 this.showtab=1;
		 var that=this;
		 if(type==1){this.tmode=1;this.ptype1=1;}	
		 if(type==2){
		   this.tmode=2;this.ptype2=1;
		   if(this.lng==''){
			 uni.getLocation({
			 	type:'gcj02',
				success:function(res){
				  that.lng=res.longitude;
				  that.lat=res.latitude;
				}
			 })   
		   }
		 }
		 if(type==3){this.tmode=3;this.ptype3=1;}
		},
		pth(id){
		 wx.navigateTo({
		  url:"/pages/ppp/order/pthorder?id="+id
		 })	
		},
		async qdsearch(){
		this.showtab=0;
		this.tmode=0;
		this.page=1;
		this.plist=[];
		this.status=loadingType.LOADING;
		var pitem=this.pitem;
		var sitem=this.sitem;
		var sprice=this.sprice;
		var eprice=this.eprice;
		var nd=this.nd;
		var lat=this.lat;
		var lng=this.lng;
		var kw=this.areaTxt;
			var imp=[];
			for(var kz=0;kz<sitem.length;kz++){
			  imp[kz]=pitem[sitem[kz]]['id'];	
			}
			var impstr=imp.join("|");
	 
	      const data = await loadingFun(pslist,this.page,this.plist,this.status,{sitem:impstr,sprice:sprice,eprice:eprice,nd:nd,lat:lat,lng:lng,kw:kw});
		  if (!data) return
		  this.page = data.page
		  this.plist = data.dataList
		  this.status = data.status			
		},
	  appointment(index) {
         let that = this;
         if (that.sitem.indexOf(index) == -1) {
           that.sitem.push(index);
          }else{
			that.sitem.splice(that.sitem.indexOf(index), 1);
          }
	  },
		 async showpslist(){
		  let {
		  	page,
		  	plist,
		  	status,
			headid
		  } = this
		  
	var pitem=this.pitem;
	var sitem=this.sitem;
	var sprice=this.sprice;
	var eprice=this.eprice;
	var nd=this.nd;
	var lat=this.lat;
	var lng=this.lng;
	var kw=this.areaTxt;
	if(this.impstr==''){
			var imp=[];
			for(var kz=0;kz<sitem.length;kz++){
			  imp[kz]=pitem[sitem[kz]]['id'];	
			}
			var impstr=imp.join("|");
	    }else{
			var impstr=this.impstr;
		}
	     const data = await loadingFun(pslist,this.page,this.plist,this.status,{sitem:impstr,sprice:sprice,eprice:eprice,nd:nd,lat:lat,lng:lng,kw:kw,headid:headid});	  
		  if (!data) return
		  this.page = data.page
		  this.plist = data.dataList
		  this.status = data.status	 
		 },
		 async showpitem(){
		   const{
		    code,
		    msg,
		    data
		   }= await plable();
		   if(code==1){
		   	this.pitem=data;
			var sn=uni.getStorageSync("tjsn");	
			if(sn!='' && sn!=undefined){
			  this.checktj(sn);	
			}
		   }	 
		 },
		jumpmenu(kn){
		if(kn==1){
		  uni.redirectTo({
			 url:"/pages/ppp/index/order"
		  })
		 }	
		 if(kn==2){
		   uni.redirectTo({
		 	 url:"/pages/ppp/index/drps"
		   })
		  }	
		 if(kn==3){
		   uni.redirectTo({
		 	 url:"/pages/ppp/index/dzxx"
		   })
		  }	
		 if(kn==4){
		   uni.redirectTo({
		 	 url:"/pages/ppp/index/dqdd"
		   })
		  }					
		  
		},
		psmain(pid){
		 uni.navigateTo({
		 	url:"/pages/ppp/ps/main?pid="+pid
		 })	
		},
		 sliderChange(e){
		  var value=e.detail.value;
		  var m1=value*20;
		  this.dt=m1;
		  this.nd=value;
		 }
	    }
	}
</script>
<style>
@import "./drps.css";	
</style>


